<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算属性的基本操作和复杂操作</title>
</head>
<body>

<div id="app">
  <!--  ■这两种方式的计算拼接方式，是之前已经介绍了的，不好的地方就是不灵活，如果属性过多，就会显得杂乱，同时如果有复杂的计算这种就无能为力了-->
  <span style="color: red">mustache语法:</span>
  <h2>{{firstName+" "+lastName}}</h2>
  <h2>{{firstName}} {{lastName}}</h2>
  <hr>

  <!--  ■用调用methods属性中方法的方式进行计算，明显比上面简洁多了,用methods中的方法记得加上双括号，因为是调用方法的方式-->
  <span style="color: red">调用方法的方式</span>
  <h2>{{getFullName()}}</h2>
  <h2>{{getFullName()}}</h2>
  <hr>

  <!--  ■用调用computed中计算的属性的方式，记得不要加双括号，因为识别时这是个属性而不是方法，它和methods异曲同工，
  区别就是computed的属性具有缓存的作用，同时调用方式methods是方法的调用方式，computed是属性的调用方式，也就是调用时不要加括号，否则报错，
  遇到这种计算的场景时，尽量使用computed计算属性的方式-->
  <span style="color: red">调用计算属性的方式</span>
  <h2>{{fullName}}</h2>
  <h2>{{fullName}}</h2>

  <h2>总价格： {{totalPrice}}</h2>


  <h2>{{hasGetAndSetFullName}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      firstName: '开始了',
      lastName: "结束了",
      books: [{id: 110, name: "unix编程大全", price: 119},
        {id: 111, name: "代码大全", price: 105},
        {id: 112, name: "深入理解虚拟机", price: 98},
        {id: 113, name: "网络编程", price: 87}]
    },
    /*
      ■我们有个疑问：computed和methods看似都能够实现我们的功能，那么为什么会出现计算属性呢？
         原因：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次,提升了性能
     */
    computed: {//计算属性，属性名尽量取名为名词，不要起名为动词
      fullName: function () {
        console.log("调用计算属性fullName")
        return this.firstName + " " + this.lastName
      },
      totalPrice: function () {
        let totalPrice = 0;
        this.books.forEach(function (value, index) {
          totalPrice += value.price;
        })
        return totalPrice;
      },
      //■通常计算属性都包含有一个getter和一个setter，上面两个方法我们只是用了getter来读取
      //■在某些情况下，你也可以提供一个setter方法（不常用）
      //■默认情况下只有get方法，上面两种只有get方法，是一种简写方式
      hasGetAndSetFullName: {
        get: function () {
          return this.firstName + " " + this.lastName
        },
        /* ■赋值的时候怎么赋值呢？
             答：比如这里，就是 app.hasGetAndSetTotalPrice = "hello word" 这种赋值方式，因为hasGetAndSetTotalPrice是一个属性，我们直接对
                hasGetAndSetTotalPrice这个属性进行赋值，vue会解析调用set方法，并且将值传入，这样newValue就能接收到
        */
        set: function (newValue) {
          console.log(newValue);
          let split = newValue.split(" ");
          this.firstName = split[0];
          this.lastName = split[1];
        }
      }
    },
    methods: {
      getFullName: function () {
        console.log("调用方法getFullName")
        return this.firstName + " " + this.lastName
      }
    }
  });

</script>
</body>
</html>